<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">

        <ui:define name="title">
            #{ managerCriarPessoa.pessoa.id == null ? 'Cadastrar Cliente' : 'Editar Cliente' }
        </ui:define>

        <ui:define name="content">
            <h:form id="cadastrarPessoaForm">
                <p:messages id="cadastrarPessoaMessages" autoUpdate="true" />

                <div class="actions">
                    <div id="buttons">
                        <p:button value="Pesquisar" outcome="pesquisarCliente.xhtml"
                                  rendered="#{ managerCriarPessoa.pessoa.id == null }"
                                  icon="ui-icon-search" styleClass="ui-priority-primary">
                        </p:button>
                    </div>
                </div>

                <p:fieldset legend="Dados" id="dadosFieldset" styleClass="dadosPanel">

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo" for="nomeInputText"
                                           rendered= "#{ managerCriarPessoa.pessoa.id == null }" />
                        </div>                        
                        <div class="column10">
                            <p:selectOneRadio id="tipoPessoaSelectOneMenu" value= "#{ managerCriarPessoa.pessoa.tipoPessoa }"
                                              rendered= "#{ managerCriarPessoa.pessoa.id == null }">
                                <f:selectItems value= "#{ enums.tiposPessoa() }" />
                                <p:ajax event="change" update="dadosFieldset" oncomplete="widthFix();" />
                            </p:selectOneRadio>
                        </div>
                    </div>

                    <p:panel id="pessoaFisicaPanel" styleClass="noborder"
                             rendered= "#{ managerCriarPessoa.pessoa.tipoPessoa eq 'FISICA' }">

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Nacionalidade" for="nacionalidadeSelectOneMenu" />
                            </div>
                            <div class="column3">
                                <p:selectOneMenu id="nacionalidadeSelectOneMenu" value= "#{ managerCriarPessoa.pessoa.nacionalidade }">
                                    <f:selectItems value= "#{ enums.nacionalidades() }" />
                                    <p:ajax event="change" update="pessoaFisicaPanel" oncomplete="widthFix();" />
                                </p:selectOneMenu>
                            </div>
                        </div>                        

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Nome" for="nomeInputText" />
                            </div>
                            <div class="column8">
                                <p:inputText id="nomeInputText" value= "#{ managerCriarPessoa.pessoa.nome }"
                                             required="true" requiredMessage="Nome é obrigatório" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="CPF" for="cpfInputMask" />
                            </div>
                            <div class="column3">
                                <p:inputMask id="cpfInputMask" value= "#{ managerCriarPessoa.pessoa.cpf }"
                                             mask="999.999.999-99" />
                            </div>                             

                            <div class="column2"
                                 style="#{ managerCriarPessoa.pessoa.nacionalidade eq 'BRASILEIRO' ? 'display: block' : 'display: none' }">
                                <p:outputLabel value="RG" for="rgInputText" />
                            </div>
                            <div class="column3"
                                 style="#{ managerCriarPessoa.pessoa.nacionalidade eq 'BRASILEIRO' ? 'display: block' : 'display: none' }">
                                <p:inputText id="rgInputText" value= "#{ managerCriarPessoa.pessoa.rg }" />
                            </div>

                            <div class="column2"
                                 style="#{ managerCriarPessoa.pessoa.nacionalidade eq 'ESTRANGEIRO' ? 'display: block' : 'display: none' }">
                                <p:outputLabel value="RNE" for="rneInputText" />
                            </div>
                            <div class="column3"
                                 style="#{ managerCriarPessoa.pessoa.nacionalidade eq 'ESTRANGEIRO' ? 'display: block' : 'display: none' }">
                                <p:inputText id="rneInputText" value= "#{ managerCriarPessoa.pessoa.rne }" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Data de Nascimento" />
                            </div>
                            <div class="column3">
                                <p:calendar id="dataVigorCalendar" value= "#{ managerCriarPessoa.pessoa.dataNascimento }"
                                            showOn="button" pattern="dd/MM/yyyy" locale="pt" navigator="true" yearRange="1900:c+10" />
                            </div>

                            <div class="column2">
                                <p:outputLabel value="Estado Civil" for="estadoCivilSelectOneMenu" />
                            </div>
                            <div class="column3">
                                <p:selectOneMenu id="estadoCivilSelectOneMenu" value= "#{ managerCriarPessoa.pessoa.estadoCivil }">
                                    <f:selectItems value= "#{ enums.estadosCivis() }" />
                                </p:selectOneMenu>
                            </div>
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Sexo" for="sexoSelectOneRadio" />
                            </div>
                            <div class="column3">
                                <p:selectOneRadio id="sexoSelectOneRadio" value= "#{ managerCriarPessoa.pessoa.sexo }">
                                    <f:selectItems value= "#{ enums.sexos() }" />
                                </p:selectOneRadio>
                            </div>

                            <div class="column2">
                                <p:outputLabel value="Profissão" for="profissaoInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="profissaoInputText" value= "#{ managerCriarPessoa.pessoa.profissao }" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Email" for="emailInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="emailInputText" value="#{ managerCriarPessoa.pessoa.email }" />
                            </div>                        
                        </div>

                    </p:panel>

                    <p:panel id="dadosPessoaJuridica" styleClass="noborder"
                             rendered= "#{ managerCriarPessoa.pessoa.tipoPessoa eq 'JURIDICA' }">
                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Nome Fantasia" for="nomeFantasiaInputText" />
                            </div>
                            <div class="column8">
                                <p:inputText id="nomeFantasiaInputText" value= "#{ managerCriarPessoa.pessoa.nome }"
                                             required="true" requiredMessage="Nome Fantasia é obrigatório" />                                
                            </div>
                        </div>

                        <div class="row">    
                            <div class="column2">
                                <p:outputLabel value="Razão Social" for="razaoSocialInputText" />
                            </div>
                            <div class="column8">
                                <p:inputText id="razaoSocialInputText" value= "#{ managerCriarPessoa.pessoa.razaoSocial }"
                                             required="true" requiredMessage="Razão é obrigatório" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="CNPJ" for="cnpjInputMask" />
                            </div>
                            <div class="column8">
                                <p:inputMask id="cnpjInputMask" value= "#{ managerCriarPessoa.pessoa.cnpj }"
                                             required="true" requiredMessage="CNPJ é obrigatório" mask="99.999.999/9999-99" />                                
                            </div>
                        </div>                        
                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Responsável" for="responsavelInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="responsavelInputText" value= "#{ managerCriarPessoa.pessoa.responsavel }" />
                            </div>

                            <div class="column2">
                                <p:outputLabel value="Email" for="emailJuridicaInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="emailJuridicaInputText" value="#{ managerCriarPessoa.pessoa.email }" />
                            </div>                        
                        </div>
                    </p:panel>

                    <div class="avatar" style="#{ managerCriarPessoa.pessoa.tipoPessoa eq 'FISICA' ? 'display: block' : 'display: none' }">
                        <p:panel id="avatar">
                            <p:graphicImage id="avatar1" styleClass="image grid_3" 
                                            style="margin-left:1%; width: 120px;"
                                            alt="#{ managerCriarPessoa.imagem.url }" title= "#{ managerCriarPessoa.imagem.url }"
                                            url="#{ managerCriarPessoa.imagem.url eq null ? '':'show/?url='}#{ managerCriarPessoa.imagem.url eq null ? 'media/images/avatar.jpg' : managerCriarPessoa.imagem.url}" />
                            <div class="clear"></div>

                            <p:commandButton value="Capturar" icon="ui-icon-image" onclick="capt.show();"  
                                             process="@this"
                                             styleClass="grid_23" immediate="true"/>

                        </p:panel>
                    </div>

                </p:fieldset>

                <p:fieldset legend="Telefones" id="telefoneFieldset">

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do Telefone" for="tipoTelefoneSelectOneMenu" />
                        </div>
                        <div class="column3">
                            <p:selectOneMenu id="tipoTelefoneSelectOneMenu" value="#{ managerCriarPessoa.telefone.tipoTelefone }"
                                             required="true" requiredMessage="Tipo do Telefone é obrigatório">
                                <f:selectItems value="#{ enums.tiposTelefone() }" />
                            </p:selectOneMenu>
                        </div>

                        <div class="column2">
                            <p:outputLabel value="DDD" for="dddInputMask" />
                        </div>
                        <div class="column1">
                            <p:inputMask id="dddInputMask" value="#{ managerCriarPessoa.telefone.ddd }"
                                         mask="99" required="true" requiredMessage="Tipo do Telefone é obrigatório" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel  value="Número" for="numeroTelefoneInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="numeroTelefoneInputText" value="#{ managerCriarPessoa.telefone.numero }" 
                                         required="true" requiredMessage="Tipo do Telefone é obrigatório"/>
                        </div>
                    </div>

                    <div class="command">
                        <p:commandButton value="Adicionar" actionListener="#{ managerCriarPessoa.adicionarTelefone() }" update=":cadastrarPessoaForm:telefoneFieldset"
                                         icon="ui-icon-plus" process=":cadastrarPessoaForm:telefoneFieldset" oncomplete="widthFix();" />
                        <p:commandButton value="Limpar" update=":cadastrarPessoaForm:telefoneFieldset" process="@this, :cadastrarPessoaForm:telefoneFieldset" icon="ui-icon-close"
                                         actionListener="#{ managerCriarPessoa.limparTelefone() }" oncomplete="widthFix();" />
                    </div>

                    <p:dataTable id="telefoneDataTable" value="#{ managerCriarPessoa.pessoa.telefones }" var="telefone"
                                 rows="5" paginator="true" paginatorPosition="bottom" emptyMessage="Nenhum telefone adicionado">

                        <p:column headerText="Opções" width="5%">
                            <div class="options2">
                                <p:commandButton icon="ui-icon-pencil" actionListener="#{ managerCriarPessoa.editarTelefone(telefone) }"
                                                 process="@this" update=":cadastrarPessoaForm:telefoneFieldset" oncomplete="widthFix();" />
                                <p:commandButton immediate="true" title="Excluir" oncomplete="dialogTelefoneApagar.show()" icon="ui-icon-trash">
                                    <f:setPropertyActionListener target="#{ managerCriarPessoa.telefoneDeletar }" value="#{ telefone }" />
                                </p:commandButton>
                            </div>
                        </p:column>
                        <p:column headerText="Tipo" width="35%">
                            <h:outputText value="#{ telefone.tipoTelefone.nome }" />
                        </p:column>
                        <p:column headerText="DDD" width="20%">
                            <h:outputText value="#{ telefone.ddd }" />
                        </p:column>
                        <p:column headerText="Número" width="35%">
                            <h:outputText value="#{ telefone.numero }" />
                        </p:column>
                    </p:dataTable>

                </p:fieldset>

                <p:fieldset legend="Endereço" id="enderecoFieldset">

                    <div class="row">                        
                        <div class="column2">
                            <p:outputLabel value="Zona" for="zonaSelectOneMenu" />
                        </div>
                        <div class="column3">
                            <p:selectOneMenu id="zonaSelectOneMenu" value="#{ managerCriarPessoa.pessoa.endereco.zona }">
                                <f:selectItems value="#{ enums.zonasImovel() }" />
                                <p:ajax event="change" update=":cadastrarPessoaForm:localidadeInputText, :cadastrarPessoaForm:zonaOutputLabel" />
                            </p:selectOneMenu>
                        </div>                        
                    </div>                    
                    
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do endereço" for="tipoEnderecoInputText" />
                        </div>
                        <div class="column3">
                            <p:selectOneMenu id="tipoEnderecoInputText" value= "#{ managerCriarPessoa.pessoa.endereco.tipo }">
                                <f:selectItems value= "#{ enums.tiposEndereco() }" />
                            </p:selectOneMenu>
                        </div>
                        
                        <div class="column2">
                            <p:outputLabel value="Tipo do logradouro" for="tipoLogradouroInputText" />
                        </div>
                        <div class="column3">
                            <p:selectOneMenu id="tipoLogradouroInputText" value= "#{ managerCriarPessoa.pessoa.endereco.tipoLogradouro }">
                                <f:selectItems value= "#{ enums.tiposLogradouro() }" />
                            </p:selectOneMenu>
                        </div>                        
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Número" for="numeroInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="numeroInputText" value= "#{ managerCriarPessoa.pessoa.endereco.numero }"/>
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Logradouro" for="logradouroInputText" />
                        </div>
                        <div class="column5">
                            <p:inputText id="logradouroInputText" value= "#{ managerCriarPessoa.pessoa.endereco.logradouro }" />
                        </div>
                    </div>                    

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Cidade" for="cidadeAutoComplete" />
                        </div>
                        <div class="column3">
                            <p:autoComplete id="cidadeAutoComplete" value= "#{ managerCriarPessoa.pessoa.endereco.cidade }"
                                            forceSelection="true" dropdown="true" var="cidade" itemValue= "#{ cidade }" 
                                            itemLabel= "#{ cidade.nome }" completeMethod= "#{ managerCriarPessoa.autocompletarCidade }"
                                            converter="conversorcidade" minQueryLength="3" required="true" requiredMessage="Cidade é obrigatório"> 
                                <p:ajax event="itemSelect" oncomplete="widthFix();" update="@this, :cadastrarPessoaForm:bairroAutoComplete" />
                            </p:autoComplete>
                        </div>


                        <div class="column2">
                            <p:outputLabel value="Bairro" for="bairroAutoComplete" />
                        </div>
                        <div class="column5">
                            <p:autoComplete id="bairroAutoComplete" value= "#{ managerCriarPessoa.pessoa.endereco.bairro }"
                                            forceSelection="true" dropdown="true" var="bairro" itemValue= "#{ bairro }" 
                                            itemLabel= "#{ bairro.nome }" completeMethod= "#{ managerCriarPessoa.autocompletarBairro }"
                                            disabled= "#{ managerCriarPessoa.pessoa.endereco.cidade == null }"
                                            converter="conversorbairro" minQueryLength="3" />
                        </div>
                    </div>                    

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="CEP" for="cepInputMask" />
                        </div>
                        <div class="column3">
                            <p:inputMask id="cepInputMask" value= "#{ managerCriarPessoa.pessoa.endereco.cep }"
                                         mask="99.999-999" />
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Localidade" for="localidadeInputText" id="zonaOutputLabel"
                                           style="#{ managerCriarPessoa.pessoa.endereco.zona == 'RURAL' ? 'diplay: block' : 'display: none' }" />
                        </div>
                        <div class="column5">
                            <p:inputText id="localidadeInputText" value="#{ managerCriarPessoa.pessoa.endereco.localidade }"
                                         style="#{ managerCriarPessoa.pessoa.endereco.zona == 'RURAL' ? 'diplay: block' : 'display: none' }"/>
                        </div>
                    </div>

                </p:fieldset>


                <p:fieldset legend="Dados Bancários" id="dadosBancariosFieldset">

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Banco" for="bancoAutoComplete" />
                        </div>
                        <div class="column3">
                            <p:autoComplete id="bancoAutoComplete"  value= "#{ managerCriarPessoa.contaBancaria.banco }"
                                            label="Banco" var="banco" forceSelection="true" dropdown="true" 
                                            minQueryLength="3" itemValue= "#{ banco }" itemLabel= "#{ banco.cod.concat(' - ').concat(banco.nome) }"
                                            completeMethod= "#{ managerCriarPessoa.autocompleteBanco }" required="true"
                                            requiredMessage="Banco é obrigatório" converter="conversorbanco">
                            </p:autoComplete>
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Tipo de conta" for="tipoContaBancariaSelectOneMenu" />
                        </div>
                        <div class="column3">
                            <p:selectOneMenu id="tipoContaBancariaSelectOneMenu"
                                             required="true" requiredMessage="Tipo é obrigatório"
                                             value= "#{ managerCriarPessoa.contaBancaria.tipoContaBancaria }">
                                <f:selectItems value= "#{ enums.tipoContaBancarias() }" />
                            </p:selectOneMenu>
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Agência" for="agenciaInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="agenciaInputText" 
                                         required="true" requiredMessage="Agência é obrigatório"
                                         value= "#{ managerCriarPessoa.contaBancaria.agencia }"/>
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Conta" for="conta"/>
                        </div>
                        <div class="column3">
                            <p:inputText id="conta" required="true" requiredMessage="Conta é obrigatório"
                                         value= "#{ managerCriarPessoa.contaBancaria.conta }"/>
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Operação" for="operacao" />
                        </div>
                        <div class="column3">
                            <p:inputText id="operacao" label="Operação" 
                                         value= "#{ managerCriarPessoa.contaBancaria.operacao }"/>
                        </div>                        
                    </div>

                    <div class="command">
                        <p:commandButton value="Adicionar" 
                                         actionListener= "#{ managerCriarPessoa.adicionarContaBancaria() }" 
                                         icon="ui-icon-plus" oncomplete="widthFix();"
                                         process="@this, :cadastrarPessoaForm:dadosBancariosFieldset"
                                         update=":cadastrarPessoaForm:dadosBancariosFieldset" />
                    </div>

                    <p:dataTable id="contasBancariasDataTable" var="conta" 
                                 value= "#{ managerCriarPessoa.contasBancarias }"
                                 paginator="true"  paginatorPosition="bottom"
                                 emptyMessage="Nenhum registro">
                        <f:facet name="header">
                            Lista de Contas
                        </f:facet>

                        <p:column headerText="Ação" width="5%">
                            <div class="options2">
                                <p:commandButton icon="ui-icon-pencil" actionListener= "#{ managerCriarPessoa.editarContaBancaria(conta) }"
                                                 oncomplete="widthFix();" process="@this"
                                                 update=":cadastrarPessoaForm:dadosBancariosFieldset" />
                                <p:commandButton immediate="true" title="Excluir" oncomplete="dialogContaApagar.show()" icon="ui-icon-trash">
                                    <f:setPropertyActionListener target="#{ managerCriarPessoa.contaBancariaDeletar }" value="#{ conta }" />
                                </p:commandButton>
                            </div>
                        </p:column>

                        <p:column headerText="Banco" width="45%">
                            <h:outputText value= "#{ conta.banco.nome }"/>
                        </p:column>

                        <p:column headerText="Conta" width="50%">
                            <h:outputText value="Conta #{ conta.tipoContaBancaria.nome }"/><br/>
                            <h:outputText value="Agência: #{ conta.agencia }"/><br/>
                            <h:outputText value="Conta: #{ conta.conta }"/><br/>
                            <h:outputText value="Operação: #{ conta.operacao }"/>
                        </p:column>

                    </p:dataTable>

                </p:fieldset>

                <div class="command">
                    <p:commandButton actionListener= "#{ managerCriarPessoa.salvarCliente() }"
                                     id="salvarCommandButton"
                                     styleClass="ui-priority-primary"
                                     value="Salvar" update="@form" icon="ui-icon-disk"
                                     process="@this, :cadastrarPessoaForm:dadosFieldset, :cadastrarPessoaForm:contasBancariasDataTable, :cadastrarPessoaForm:enderecoFieldset"
                                     oncomplete="widthFix();" onclick="goY(400);"  onsuccess="goY(0);"/>
                    <p:button value="Cancelar" rendered="#{ managerCriarPessoa.pessoa.id == null }"
                              href="criarCliente.xhtml" icon="ui-icon-cancel"/>


                    <p:button value="Visualizar" outcome="visualizarCliente.xhtml"
                              rendered="#{ managerCriarPessoa.pessoa.id != null }"
                              icon="ui-icon-search" >
                        <f:param value= "#{ managerCriarPessoa.pessoa.id }" name="pessoaId"/>
                    </p:button>                    
                </div>

                <p:blockUI block="cadastrarPessoaForm" trigger=":cadastrarPessoaForm:salvarCommandButton">
                    Salvando dados...
                </p:blockUI>

                <p:dialog id="image" dynamic="true" header="Captura de Imagem" modal="true" widgetVar="capt">  
                    <p:panel id="imagePanel" style="background: none; border: none;" 
                             styleClass="container_24 clearfix ">
                        <p:photoCam widgetVar="pc" update=":cadastrarPessoaForm:avatar1" listener= "#{ managerCriarPessoa.oncapture }"/>
                        <div class="clear"></div>
                        <p:commandButton value="Capturar" onclick="pc.capture();"
                                         process="@this, :cadastrarPessoaForm:avatar1" update="@this, :cadastrarPessoaForm:avatar1" icon="ui-icon-check"
                                         styleClass="grid_24" oncomplete="capt.hide();"/>
                    </p:panel>
                </p:dialog>

                <p:dialog header="Deseja realmente excluir a conta?" widgetVar="dialogContaApagar" modal="true"
                          closable="false" resizable="false" draggable="false" >
                    <div class="commandDialog">
                        <p:commandButton
                            value="Sim"
                            process="@this"
                            oncomplete="dialogContaApagar.hide()" icon="ui-icon-check" actionListener="#{ managerCriarPessoa.removerContaBancaria() }"
                            update=":cadastrarPessoaForm:contasBancariasDataTable" />
                        <p:commandButton value="Não" icon="ui-icon-close" immediate="true" oncomplete="dialogContaApagar.hide()" />
                    </div>
                </p:dialog>

                <p:dialog header="Deseja realmente excluir o telefone?" widgetVar="dialogTelefoneApagar" modal="true"
                          closable="false" resizable="false" draggable="false" >
                    <div class="commandDialog">
                        <p:commandButton
                            value="Sim"
                            process="@this"
                            oncomplete="dialogTelefoneApagar.hide()" icon="ui-icon-check" actionListener="#{ managerCriarPessoa.removerTelefone() }"
                            update=":cadastrarPessoaForm:telefoneDataTable" />
                        <p:commandButton value="Não" icon="ui-icon-close" immediate="true" oncomplete="dialogTelefoneApagar.hide()" />
                    </div>
                </p:dialog>

            </h:form>

            <script>
                $(document).ready(function() {
                    setSelectedMenu('#cliente');
                });
            </script>

        </ui:define>
    </ui:composition>

</html>
